<template>
  <el-container class="index-con">
    <el-aside :class="showclass">
      <leftnav></leftnav>
    </el-aside>

    <el-container class="main-con">
      <el-header class="index-header">
        <navcon></navcon>
      </el-header>

      <el-main clss="index-main">
        <!-- appear 进入页面加载动画 -->
        <transition name="transitionName" appear>
          <router-view></router-view>
				</transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 导入组件
import navcon from '../components/navcon.vue'
import leftnav from '../components/leftnav.vue'
export default {
  name: 'index',
  data() {
    return {
      showclass: 'asideshow',
      showtype: false
    }
  },
  // 注册组件
  components: { navcon, leftnav },
  methods: {},
  created() {
    // 监听
    this.$root.Bus.$on('toggle', value => {
      if (value) {
        this.showclass = 'asideshow';
      } else {
        setTimeout(() => {
          this.showclass = 'aside';
        }, 300)
      }
    })
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {}
}
</script>

<style scoped>
.index-con { height: 100%; width: 100%; box-sizing: border-box; }
.aside { width: 64px !important; height: 100%; background-color: #334157; margin: 0px; }
.asideshow { width: 140px !important; height: 100%; background-color: #334157; margin: 0px; }
.index-header, .index-main { padding: 0px; border-left: 2px solid #333; }
.el-main { background: rgba(242, 242, 242, .6); }
::-webkit-scrollbar { width: 0px; height: 0px; }/* 设置滚动条的样式 */
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(45, 206, 255, 0.4); border-radius: 10px; background: hsla(0, 0%, 100%, 0.302);
}
::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(219, 16, 219, 0.1); -webkit-box-shadow: inset 0 0 6px rgba(45, 206, 255, 0.4);background: #646062; }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 174, 255, 0.4); }
.index-main { width: calc(100% - 180px); position: absolute; }
.transitionName-enter-active { transition: all .6s ease; }/* 设置持续时间和动画函数 *//* 可以设置不同的进入和离开动画 */
.transitionName-leave-active { transition: all 0s cubic-bezier(1.0, 0.5, 0.8, 1.0); }
.transitionName-enter, .transitionName-leave-to { transform: translateX(-50px); opacity: 0; }
</style>